#{extends 'CRUD/layout.html' /}
#{set title:messages.get('crud.show.title', type.modelName) /}

<div id="crudShow" class="${type.name}">

    <h2 id="crudShowTitle">&{'crud.show.title', type.modelName}</h2>

    <div class="objectForm">
    #{form action:@save(object._key()), enctype:'multipart/form-data'}
        #{crud.form}
            #{crud.custom 'tags'}
                <label for='tags'>
                    &{'tags'}
                </label>
                    <script type="text/javascript">
                        var toggle = function(tagEl) {
                            var input = document.getElementById('h'+tagEl.id);
                            if(tagEl.className.indexOf('selected') > -1) {
                                tagEl.className='tag';
                                input.value='';
                            } else{
                                tagEl.className = 'Tag selected';
                                input.value = tagEl.id;
                            }
                        }
                    </script> 
                    <div class="tags-list">
                        #{list items:models.Tag.findAll(), as:'tag'}
                            <span id="${tag.id}" onclick="toggle(this)" class="tag ${object.tags.contains(tag) ? 'selected': ''}">
                                ${tag}
                            </span>
                            <input id="h${tag.id}" type="hidden" name="${fieldName}" value="${object.tags.contains(tag) ? tag.id : ''}" />
                        #{/list}
                    </div>
            #{/crud.custom}
        #{/crud.form}
        <p class="crudButtons">
            <input type="submit" name="_save" value="&{'crud.save', type.modelName}" />
                
            <input type="submit" name="_saveAndContinue" value="&{'crud.saveAndContinue', type.modelName}" />
        </p>
    #{/form}
    </div>

    #{form @delete(object._key())}
        <p class="crudDelete">
            <input type="submit" value="&{'crud.delete', type.modelName}" />
        </p>
    #{/form}

</div>